<template>
  <div class="details">
    <el-card>
      <el-tabs v-model="active">
        <el-tab-pane label="登录帐户设置" name="first">
          <el-form :model="formData" class="myform" label-width="100px">
            <el-form-item label="姓名：">
              <el-input v-model="formData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码：">
              <el-input v-model="formData.password" type="password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submit">更新</el-button>
              <el-button type="text" @click="cancel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="个人详情" name="second">
          <!-- 个人详情 -->
          <uerInfo></uerInfo>
        </el-tab-pane>
        <el-tab-pane label="岗位信息" name="third">
          <!-- 岗位信息 -->
          <jobInfo></jobInfo>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import EmployeeEnum from "@/api/elmentyess.js";
import { userAddApi, serveBaseInfoApi } from "@/api/elmentyess";
export default {
  name: "detail",
  data() {
    return {
      active: "first",
      // 数据源
      formData: {
        username: "",
        password: ""
      },
      // 接收 id
      id: this.$route.query.id
    };
  },
  components: {
    uerInfo: () => import("../components/user-info.vue"),
    jobInfo: () => import("../components/job-info.vue")
  },
  methods: {
    // 得到用户基本信息
    async getBaseInfo() {
      const res = await userAddApi(this.id);
      //  保存用户信息
      // console.log(res);
      this.formData = res.data;
    },
    // 更新事件
    async submit() {
      await serveBaseInfoApi(this.formData);
      console.log(this.formData);
      // 提示更新成功
      this.$message.success("更新成功");
    },
    // 取消返回页面
    cancel() {
      this.$router.push("/employees");
    }
  },
  created() {
    this.getBaseInfo();
  }
};
</script>

<style lang="scss" scoped>
.details {
  padding: 20px;
  .myform {
    width: 500px;
    margin: 50px 0px 50px 200px;
  }
}
</style>
